import React,{Component} from 'react';


import {observer,inject} from "mobx-react";
import {computed,toJS} from "mobx";
import {Link} from "react-router-dom";

import {View} from "../component/index";
import {
  FileImageOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined
} from '@ant-design/icons';
import {Select,
  Input,
  Button,
  Modal,
  Popover,
  Tree,
  Table,
  Cascader,
  Upload,
  Image
} from "antd";
const { Option } = Select;
const {TreeNode} = Tree;
const { Search,TextArea } = Input;



const style={
  formItem:{
    marginBottom:10,
    alignItems:"center"
  }
};


// 商品管理
@inject(["store"])
@observer
class Product extends Component{
  constructor(props){
    super(props);
    this.store = props.store;
    this.product = props.store.storeProduct;
    
  }
  
  componentDidMount(){
    this.store.navigation({page:"Product"});
    if(!this.data.length && !this.treeData.length){this.product.init();}
  }

  // loading
  @computed get loading(){return this.store.loading;}
  // 高度
  @computed get height(){return this.store.height;}
  @computed get rootPath(){return this.store.rootPath;}

  // treeData
  @computed get treeData() {return this.product.treeData.slice();}
  @computed get options(){return this.product.options.slice();}
  // 树形所选节点
  @computed get selectedKeys(){return toJS(this.product.selectedKeys);}
  // 分页数据
  @computed get data() {return toJS(this.product.paging.data);}
  // 查询
  @computed get where() {return this.product.where;}
  @computed get tid() {return this.product.tid;}
  // 分页
  @computed get pagination(){
    return {current:Number(this.product.paging.nowPage),total:Number(this.product.paging.maxNum),pageSize:Number(this.product.paging.num)};
  }

  @computed get treeWidth(){return this.product.treeWidth;}


  
  // 树形
  renderTreeNodes = (data) => {
    return data.map((item) => {
      const title = (
        <Popover 
          placement="right" 
          title={item.title} 
          content={
            <div>
              <p>id:{item.id}</p>
              <p>upid:{item.upid}</p>
              <p>tit:{item.title}</p>
              <p>cont:{item.cont}</p>
            </div>
          } 
          trigger="contextMenu">
          <span>{item.title}</span>
        </Popover>
      );
      if (item.children) {
        return (
          <TreeNode title={title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode {...item} dataRef={item} title={title} />;
    });
  }

  render(){
    const columns = [
      {title: "编号",dataIndex: "id",width:"10%"},
      {title: "商品名称",dataIndex: "tit",width:"20%"},
      {title: "商品价格",dataIndex: "price",width:"10%",render:text=>`￥${parseFloat(text)/100}`},
      {title: "商品图片",dataIndex: "image",width:"10%",render:text=>{return text?<Image alt="图片" style={{width:40,height:40}} src={text} />:<FileImageOutlined />;}},
      {title: "商铺名称(ID)",dataIndex: "shops",width:"20%",render:(text,a)=>`${text}(${a.sid})`},
      {
        title:"创建时间",
        dataIndex:"createtime",
        width:" 15%",
        render:(text)=>{
          let tm = new Date(Number(text)*1000);
          return <span>{tm.getFullYear()}-{tm.getMonth()+1}-{tm.getDate()}</span>;
        }
      },
      {
        width:"15%",
        title: "相关操作",
        key: "form",
        render: (text ,record)=> {
          return(
            <View>
              <Button
                onClick={()=>this.props.history.push(`${this.rootPath}/pedit/${record.id}`)}
                shape="circle"
                title="编辑"
                icon={<EditOutlined />}
              />
              <Button
                onClick={()=>{
                  Modal.confirm({
                    title: "确认放入回收站",
                    content: "是否放入回收站内？",
                    onOk:()=>this.product.delete(record.id),
                    onCancel() {},
                  });
                }}
                icon={<DeleteOutlined />}
                style={{margin:"0 10px"}}
                type="danger"
                shape="circle"
                title="回收站"
              />
            </View>
          );
        } 
      },
    ];
    
    return (
      <View style={{overflow:"hidden",height:this.height-50,width:"100%"}}>
        <div
          style={{
            borderRight:"1px #f6f6f6 solid",
            height:this.height-50,
            width:this.treeWidth,
            overflow:"auto",
            padding:10
          }}
          onMouseDown={e => {
            e.preventDefault()
            // e = e || event
            let { clientX, clientY } = e
            let width = parseFloat(this.treeWidth)
            document.body.onmousemove = (e: any) => {
              // e = e || event
              let newWidth = width + (e.clientX - clientX)
              this.product.set("treeWidth",newWidth);
            }
            document.body.onmouseup = function () {
              document.body.onmousemove = null
            }
          }}
          >
          <Tree
            loadData={this.product.onLoadData}
            treeData={this.treeData}
            selectedKeys={this.selectedKeys}
            onSelect={(keys,info)=>{
              this.product.set("tid",keys);
              this.product.page(1);
              this.product.click(keys,info);
            }}
            showLine
          >
          {
            // this.renderTreeNodes(this.treeData)
          }
          </Tree>
        </div>
        <div style={{flex:1,overflow:"hidden",height:this.height,padding:"0 5px"}}>
          <View 
            style={{
              borderBottom:"1px #eee solid",
              height:50,
              alignItems:"center",
              background:"#f2f2f2"
            }}>
            <Select
              defaultValue="0"
              onChange={v=>this.product.set("where-field",v)}
              style={{width:"100px",margin:"0 5px"}}
              >
              <Option value="0">选择类型</Option>
              <Option value="id">商品编号</Option>
              <Option value="tit">商品名称</Option>
              <Option value="uid">商铺编号</Option>
            </Select>
            <Select
              defaultValue="0"
              onChange={v=>this.product.set("where-condition",v)}
              style={{width:100,margin:"0 5px"}}
              >
              <Option value="0">选择条件</Option>
              <Option value="=">等于查询</Option>
              <Option value="like">模糊查询</Option>
            </Select>
            <Search
              placeholder="输入查询内容"
              onSearch={value => this.product.search(value)}
              style={{ width: 250 }}
              value={this.where.value}
              onChange={(e)=>this.product.set("where-value",e.target.value)}
              enterButton
            />
            <Button onClick={()=>this.product.init()}  style={{margin:"0 5px 0 20px"}}>所有商品</Button>
            <Link to={`${this.rootPath}/pedit`}>
              <Button
                icon={<PlusOutlined />} 
                type="primary" 
                style={{margin:"0 5px"}}
                >
                新建商品
              </Button>
            </Link>
            
          </View>
          <Table
            scroll={{y:this.height-180,x:"100%"}}
            loading={this.loading}
            rowKey={record => record.id}
            columns={columns}
            dataSource={this.data}
            pagination={this.pagination}
            onChange={pagination=>this.product.page(pagination.current)}
          />
        </div>
     
      </View>
    );
  }
}

export default Product;